import gsap from 'gsap';
import Vue from "vue";
import {ComputedType, DataType, PropsType} from "../../../types/LsRollNumber";

export default Vue.extend<DataType, unknown, ComputedType, PropsType>({
  name: "LsRollNumber",
  props: {
    number: {
      type: Number,
      required: true
    },
    fix: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      animateNumber: 0
    }
  },
  created() {
    this.animateNumber = this.number;
  },
  computed: {
    showNumber() {
      return this.animateNumber.toFixed(this.fix);
    }
  },
  watch: {
    number: function (newValue) {
      gsap.to(this.$data, {duration: 0.5, animateNumber: newValue});
    }
  }
})
